﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>drag - test</title>
	<script type="text/javascript">
		$(function(){
				jQuery.ajax({

				});
		});
var on = function( el, type, fn )
{
    el.addEventListener ?
	    el.addEventListener(type, fn, false) :
	el.attachEvent ?
	    el.attachEvent('on' + type, fn) :
	el['on'+type] = fn;
},

un = function( el, type, fn )
{
    el.removeEventListener ?
	    el.removeEventListener(type, fn, false) :
	el.detachEvent ?
	    el.detachEvent('on' + type, fn) :
	el['on'+type] = null;
},

dragEvent =
{
    onstart: function(){},
	start: function(event)
	{
	    var that = dragEvent;
		
		on( document, 'mousemove', that.move );
		on( document, 'mouseup', that.end );
		
		that._sClientX = event.clientX;
		that._sClientY = event.clientY;
		that.onstart( event.clientX, event.clientY );
		
		return false;
	},
	
	onmove: function(){},
	move: function(event)
	{
	    var that = dragEvent;
		
		that.onmove(
		    event.clientX - that._sClientX,
			event.clientY - that._sClientY
		);
		
		return false;
	},
	
	onend: function(){},
	end: function(event)
	{
	    var that = dragEvent;
		
		un( document, 'mousemove', that.move );
		un( document, 'mouseup', that.end );
		
		that.onend(  event.clientX, event.clientY );
		return false;
	}
},

use = function(event)
{
    var startLeft, startTop, parentElem = event.target.parentNode;
	
	dragEvent.onstart = function( x, y )
	{
	    startLeft = parentElem.offsetLeft;
		startTop = parentElem.offsetTop;
	};
	
	dragEvent.onmove = function( x, y )
	{
	    var left = x + startLeft,
		    top = y + startTop;
		
		parentElem.style.left = left + 'px';
		parentElem.style.top = top + 'px';
	};
	
	dragEvent.onend = function( x, y )
	{
	
	};
	
	dragEvent.start( event );
},

dragElem, dragElem1;

window.onload = function()
{
    dragElem = document.getElementById('title');
    dragElem1 = document.getElementById('title1');

    on( dragElem, 'mousedown', function(event){
        use( event );
		return false;
    });
	
	on( dragElem1, 'mousedown', function(event){
	    use( event );
		return false;
	});
};
	</script>
</head>

<body>
    <div id="iDiv" style="position:absolute;top:50px;left:200px;border:3px solid #f00;width:300px;height:200px;">
	    <div id="title" style="height:28px;background:#00f;margin:2px;"></div>
	</div>
    <div id="iDiv1" style="position:absolute;top:50px;left:700px;border:3px solid #f00;width:300px;height:200px;">
	    <div id="title1" style="height:28px;background:#00f;margin:2px;"></div>
	</div>
</body>
</html>
